<template>
    <div class="set-weight-dialog">
        <el-dialog
            title="权重设置"
            label-position="left"
            :close-on-click-modal="false"
            :visible.sync="dialogFormVisible"
            ref="form"
            width="700px"
        >
            <div class="scroll-body">
                <ul class="item-row">
                    <li
                        v-for="(item) in form.list"
                        :key="item.id"
                    >
                    <el-row>
                        <div class="col-left">
                            <el-tooltip v-if="item.name.length > 7" class="item" effect="dark" :content="item.name" placement="top">
                                <div>
                                    <span
                                        class="label-title"
                                        :class="[ ids.includes(item.id) ? 'dis-color' : '']"
                                    >
                                        {{ item.name }}
                                    </span>
                                </div>
                            </el-tooltip>
                            <div v-else>
                                <span
                                    class="label-title"
                                    :class="[ ids.includes(item.id) ? 'dis-color' : '']"
                                >
                                    {{ item.name }}
                                </span>
                            </div>
                        </div>
                        <div
                            class="col-right"
                        >
                            <el-input-number
                                v-if="ids.includes(item.id)"
                                controls-position="right"
                                :disabled="ids.includes(item.id)"
                            >
                            </el-input-number>
                            <el-input-number
                                v-else
                                controls-position="right"
                                placeholder="输入权重值"
                                :precision="0"
                                v-model="item.weight"
                                :min="1"
                                :max="100"
                                :disabled="ids.includes(item.id)"
                                :class="ids.includes(item.id) ? 'dis-input' : ''"
                            >
                            </el-input-number>
                            <template
                                v-if="type"
                            >
                                <span
                                    v-if="ids.includes(item.id)"
                                    @click="reset(item.id)"
                                    class="el-icon-refresh-left remove-disable"
                                ></span>
                                <span
                                    v-else
                                    @click="remove(item.id)"
                                    class="el-icon-remove-outline"
                                ></span>
                            </template>
                        </div>
                    </el-row>
                    </li>
                </ul>

            </div>
            <p class="tips">
                注：权重是每考核项在满分中所占的比例，所有考核项权重值之和必须等于100，精确至个位。计算比例：满分100分，权重值1=1分。
            </p>
            <div slot="footer" class="dialog-footer">
                <el-button
                    round
                    :loading="loading"
                    size="small"
                    class="btn-hover"
                    @click="sub"
                >
                    保存
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import { setWeight } from '../../../../../../api/courseReach';

export default {
    data() {
        return {
            type: false,
            ids: [],
            loading: false,
            dialogFormVisible: false,
            form: {
                list:[]
            }
        };
    },
    methods: {
        init(list, id) {
            this.type = id ? true : false ;
            this.ids.length = 0;
            this.ids.push(id);
            this.form.list = JSON.parse(list);
            this.dialogFormVisible = true;
        },

        remove(id) {
            this.ids.push(id);
        },

        reset(id) {
            const ids = this.ids.filter((item) => {
                if (item != id) {
                    return item;
                }
            });

            this.ids = ids;
        },

        sub() {
            let sum = 0;
            const list = [];
            console.log(this.ids);
            this.form.list.forEach(item => {
                const { id, weight } = item;
                if(!this.ids.includes(id)) {
                    sum += (isNaN(weight) ? 0 : weight);
                    list.push({ id, weight});
                }
            });

            if (sum != 100 && sum > 0) {
                this.$message.error('权重值之和不等于100');
                return false;
            };

            this.loading = true;

            setWeight(list).then((res) => {
                this.loading = false;
                this.$message.success('设置成功！');
                this.dialogFormVisible = false;
                this.$emit('refresh');
            }).catch(() => {
                this.loading = false;
            });
        }
    }
}
</script>

<style lang="scss">
.set-weight-dialog{
    .el-dialog__body {
        padding-top: 40px;
    }

    .el-input-number {
        width: 150px;
        line-height: 32px;
        .el-input__inner {
            text-align: left;
        }
    }

    .col-left,.col-right {
        display: inline-block;
    }

    .col-right {
        margin-left: 4px;
    }

    .el-input-number__increase,.el-input-number__decrease {
        line-height: 15px !important;
    }

    .label-title {
        margin-top: 9px;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 120px;
        white-space: nowrap;
        display: inline-block;
        text-align: right;
        position: relative;
        padding-right: 4px;
        color: #727272;
        font-size: 14px;
        font-weight: 400;
        &::after {
            content: ':';
            position: absolute;
            right: 0;
        }
    }

    .label-text {
        color: #727272;
        font-weight: 400;
        margin-left: 15px;
    }

    .tips {
        margin-top: 38px;
        color: #ADADAD;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
    }

    .col-left {
        padding-left: 5px;
    }

    .item-row {
        li {
            display: inline-block;
            width: 50%;
            padding-bottom: 20px;
        }
    }

    .el-dialog__footer {
        padding-top: 8px;
    }

    .el-icon-remove-outline, .el-icon-refresh-left {
        margin-left: 5px;
        color: #979797;
        font-size: 15px;
        vertical-align: middle;
        cursor: pointer;
    }

    .remove-disable {
        color: #dfdfdf;
    }

    .dis-color {
        color: #d3d3d3;
    }

    .el-input.is-disabled .el-input__inner {
        background-color: #fafbfc;
        border-color: #eeeff3;
        color: #e5e7ea;
    }

    .is-disabled {
        .el-input-number__decrease {
            border-left: 1px solid #eeeff3;
        }
        .el-input-number__increase {
            border-bottom: 1px solid #eeeff3;
            border-left: 1px solid #eeeff3;
        }
    }

    .scroll-body {
        max-height: 270px;
    }

    .dialog-footer {
        text-align: center;
        padding-bottom: 7px;
        .el-button--small, .el-button--small.is-round {
            padding: 9px 30px;
        }

        .el-button {
            font-size: 14px;
            border-color: #1277EB;
            color: #1277EB;
        }
    }

    .btn-hover:hover {
        background: #1277eb;
        color: #fff;
    }
}
</style>
